<template>
  <!-- 注册页面的整体盒子 -->
  <div class="reg-container">
    <!-- 注册的盒子 -->
    <div class="reg-box">
      <!-- logo的盒子 -->
      <div class="title-box"></div>
      <!-- 注册的表单区域
        1、：model 传入表单数据,
        2、：rules 传入表单校验规则
        3、prefix-icon="el-icon-search"  设置输入框图标
        4、加了校验规则后怎么生效？在 需要校验的地方加上prop=’变量名字‘
      -->

      <el-form :model="form" ref="fm" :rules="rules">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="form.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item prop="repassword">
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="form.repassword"
            placeholder="再次输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="onSubmit" type="primary" class="btn-all">
            注册
          </el-button>
          <!-- <el-link type="info">
            <router-link to="/login">去登录</router-link>
          </el-link> -->
          <!-- 使用编程式导航跳转路由 -->
          <el-link type="info" :underline="true" @click="$router.push('/login')"
            >去登录</el-link
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入注册接口
import { regApi } from '@/api/user'

export default {
  name: 'Reg',
  data () {
    // 自定义校验函数：检测前后两次输入的密码时候一致
    /**
     * rule 校验规则
     * value  当前使用校验函数字段的值（确认密码的值）
     * callback 是一个函数1、校验失败：callback（new error（’错误信息））2、成功也要调一次
     */
    const validateSame = (rule, value, callback) => {
      // 获取密码（this.form.password）和确认密码对比，是否一样？
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        // 说明：校验满足条件，一定要调用callback() 否则后面兜底校验通不过
        callback()
      }
    }
    return {
      form: {
        username: '',
        password: '',
        repassword: ''
      },
      rules: {
        // 1、用户名 校验时候与 form 元素变量一致
        // 2、加了校验规则后怎么生效？在 需要校验的地方加上prop=’变量名字‘
        username: [
          // 非空校验
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 长度校验
          { pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的字母数字', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' },
          { validator: validateSame, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async onSubmit () {
      // 提交注册
      /**
       *表达那整体校验（兜底检验）：
       调用：this.$refs.ref值.validate()
       获取el-form组件实例
       1、给el - form 组件绑定ref=”ref值“
       2、调用：this.$refs.ref值.validate()兜底校验
       说明  try catch  捕获错误
       */
      try {
        await this.$refs.fm.validate()
        // 校验通过=》代码执行到治理
        console.log('注册表单数据1', this.form)

        const { data } = await regApi(this.form)

        console.log('注册表单返回的数据2', data)
        if (data.code === 0) {
          // 1、注册成功
          // 提示用户注册成功并挑战到登录页
          this.$message.success(data.message)
          this.$router.push('/login')
        } else {
          // 2、注册失败（用户名被占用）
          this.$message.error(data.message)
        }
      } catch (error) {
        console.log('校验失败或接口请求失败', error)
      }
    }
  }

}
</script>
